<template>
  <j-modal title="新增供应商" :width="1200" :visible.sync="modalVisible" :maskClosable="false">
    <a-spin :spinning="submitLoading">
      <a-form-model ref="form" :model="formData" :rules="rules">
        <a-divider orientation="left"> 基本信息 </a-divider>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="formData.name" placeholder="请输入供应商名称" :maxLength="255"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMethod">
              <j-search-select-tag-new
                v-model="formData.paymentMethod"
                dictCode="purchase_settlement_type"
                :uiProps="{ allowClear: false }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="经营类目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
              <product-category-tree-select v-model="formData.categoryId" placeholder="请选择经营类目" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="采购员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buyer">
              <j-url-select
                v-model="formData.buyer"
                placeholder="请选择"
                optionLabel="username"
                optionValue="username"
                url="/sys/user/getAllUserByOrg"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactName">
              <a-input v-model="formData.contactName" placeholder="请输入联系人姓名" :maxLength="25"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
              <a-input v-model="formData.contactPhone" placeholder="请输入联系电话" :maxLength="50"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="90天退款率"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="ninetyDayRefundRate"
            >
              <a-input-number
                v-model="formData.ninetyDayRefundRate"
                placeholder="请输入90天退款率"
                :min="0"
                :max="100"
                style="width: 80%"
              ></a-input-number
              ><span class="input-number-unit">%</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="2年退款率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="twoYearRefundRate">
              <a-input-number
                v-model="formData.twoYearRefundRate"
                placeholder="请输入2年退款率"
                :min="0"
                :max="100"
                style="width: 80%"
              ></a-input-number
              ><span class="input-number-unit">%</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="回货率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="returnRate">
              <a-input-number
                v-model="formData.returnRate"
                placeholder="请输入回货率"
                :min="0"
                :max="100"
                style="width: 80%"
              ></a-input-number
              ><span class="input-number-unit">%</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierStatus">
              <j-search-select-tag-new v-model="formData.supplierStatus" dictCode="product_supplier_status" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="是否滞留可退"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="isRetentionRefund"
            >
              <a-radio-group v-model="formData.isRetentionRefund">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="formData.remark" placeholder="请输入备注" :maxLength="255"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <template #footer>
      <a-button @click="modalVisible = false"> 取消 </a-button>
      <a-button type="primary" :loading="submitLoading" @click="handleOk"> 保存 </a-button>
    </template>
  </j-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import ProductCategoryTreeSelect from '@/components/business/ProductCategoryTreeSelect.vue'

export default {
  props: {
    // 是否显示弹框
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    ProductCategoryTreeSelect,
  },
  data() {
    return {
      modalVisible: this.visible,
      submitLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      formData: {
        name: '',
        paymentMethod: '1',
        categoryId: '',
        buyer: '',
      },
      rules: {
        name: [{ required: true, message: '请输入供应商名称!' }],
        paymentMethod: [{ required: true, message: '请选择付款方式!' }],
        categoryId: [{ required: true, message: '请选择经营类目!' }],
        buyer: [{ required: true, message: '请选择采购员!' }],
      },
      url: {
        add: '/hzkj-product/product/productLibrary/supplier/add',
      },
    }
  },
  watch: {
    modalVisible(val) {
      this.$emit('update:visible', val)
    },
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
  },
  methods: {
    // 提交
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          postAction(this.url.add, this.formData)
            .then((res) => {
              if (res.success) {
                this.$message.success('供应商添加成功')
                this.$emit('submit')
                this.modalVisible = false
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {
              this.submitLoading = false
            })
        }
      })
    },
  },
  created() {
    this.formData.buyer = this.userInfo.username
  },
}
</script>

<style lang="less" scoped>
.input-number-unit {
  display: inline-block;
  margin-left: -2px;
  width: 20%;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 0 4px 4px 0;
}
</style>
